<template>
  <div>
    <h3>系统页面</h3>
    <hr/>
    <button @click="pageName='gong'">工时</button>
    <button @click="pageName='xin'" >薪资</button>
    <hr>
    <!-- 当有多个页面切换时 -->
<!-- <gong  v-if="pageName==='gongshi'" /> -->
<!-- 使用vue的全局组件component，通过is动态绑定 -->
<component  :is="pageName"/>
  </div>
</template>
<script>
import gong from "./gongshi.vue";
import xin from "./xinzi.vue";
export default {
  components: { gong,xin },
  data(){
      return{
          pageName:'gong'
      }
  }
};
</script>